<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sign in for IAM Authentication Central</title>
	<link rel="shortcut icon" href="./favicon.ico"/>
	<!-- https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css -->
    <link rel="stylesheet" href="./static/css/font-awesome-all.5.7.2.min.css"/>
	<link rel="stylesheet" href="./static/css/bootstrap-3.3.7.min.css"/>
	<link rel="stylesheet" href="./static/css/login-1.5.2.css"/>
	<link rel="stylesheet" href="./static/css/lanren.css"/>
	<link rel="stylesheet" href="./static/css/iam-captcha-jigsaw-1.5.2.css"/>
</head>
<body style="background:url('./static/images/bg_icon/background.png') no-repeat;background-size: cover;">
    <!--<script type="text/javascript">
       // 只有放<body>之后（内容元素之前）最合适，否则会出现缩放闪屏（但使用如VUE框架则没有此问题，可放在</body>之前）
       let w = window.screen.width;
       if (w >= 1500) {
         document.body.style.zoom = '1';
       } else if (w >= 1400) {
         document.body.style.zoom = '0.9';
       } else if (w >= 1250) {
         document.body.style.zoom = '0.8';
       } else {
         document.body.style.zoom = '0.7';
       }
    </script>-->
	<div id="top">
		<img id="img_logo" src="./static/images/bg_icon/logo.png" />
	</div>
	<div id="content">
		<div id="content-left" class="lanren">
			<ul>
				<li><img src="./static/images/roll/ai1.png"> </li>
				<li><img src="./static/images/roll/ai2.png"> </li>
				<li><img src="./static/images/roll/ai3.png"> </li>
			</ul>
			<ul>
				<li><img src="./static/images/roll/wulianwang1.png"> </li>
				<li><img src="./static/images/roll/wulianwang2.png"> </li>
				<li><img src="./static/images/roll/wulianwang3.png"> </li>
			</ul>
			<ul>
				<li><img src="./static/images/roll/nengyuan1.png"> </li>
				<li><img src="./static/images/roll/nengyuan2.png"> </li>
				<li><img src="./static/images/roll/nengyuan3.png"> </li>
			</ul>
			<div class="base">
				<img src="./static/images/roll/base.png" alt="图片">
			</div>
			<div class="cloud">
				<img src="./static/images/roll/yun.png" alt="图片">
			</div>
			<div class="shadow">
				<img src="./static/images/roll/yunyinyin.png" alt="图片">
			</div>
			<div class="light">
				<img src="./static/images/roll/guangzhu.png" alt="图片" style="z-index:-4;position:relative;">
			</div>
		</div>
		<div id="content-right">
			<div id="con-top">
				<span id="passwordGo" class="active">账号登录</span>
				<span class="cut-line">|</span>
				<span id="phoneGo">手机登录</span>
				<span class="cut-line">|</span>
				<span id="codeGo">扫码登录</span>
			</div>
			<div id="err_tip"></div>
			<div id="login_scan_pass">
				<form action="#">
					<div>
						<i class="icon-user"></i>
						<input id="user_name" class="text1" name="username" placeholder="请输入账号"
							style="color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
							maxlength=20>
					</div>
					<div class="pass-word">
						<i class="icon-pass"></i>
						<input placeholder="请输入密码" id="password" class="text1 text2"
							style="color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
							name="password" type="password" maxlength=35 autocapitalize=off autocomplete=off>
					</div>
					<div id="jigsaw" class="jigsaw" style="width:270px"></div>
					<div id="captcha_panel">
						<input id="captcha_input" class="text4" name="captcha"
							style="border:1px solid #dad2d2;padding-left:10px;border-radius:2px 2px 2px 2px;display:none;">
						<img id="codeimg" name="codeimg" border=0
							style="padding:0 0 5px 0;position:relative;top:3px;margin-left:5px;height:33px;cursor:pointer;display:none;"
							title="看不清? 点击图片刷新">
					</div>
					<br/>
					<input id="iam_submit" type="button" style="cursor:pointer;" value="登录"><br /><br /><br />
					<div style="position:relative;margin-top:-30px;left:18px;display: none">
						<span
							style="text-decoration: line-through;margin-left: 40px;color: #efefef;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<span class="con-foot">手机号登录</span>
						<span style="text-decoration:line-through;color: #efefef;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					</div>
					<div style="margin-top:15px;margin-left:10px;display: none">
						<img id="wechat" style="cursor:pointer;margin-left:70px;" src="./static/images/bg_icon/wx.png"
							style="margin-left: 65px;">
						<img id="qq" style="cursor:pointer;margin-left:48px;" src="./static/images/bg_icon/qq.png"
							style="margin-left: 50px;">
						<img id="sina" style="cursor:pointer;margin-left:52px;" src="./static/images/bg_icon/sina.png"
							style="margin-left: 50px;">
					</div>
				</form>
			</div>
			<div id="login_scan_panel">
				<div id="content-left1">
					<div id="qrcode_show" style="height:255px;">
					</div>
				</div>
				<div style="text-align: center;color: #4e619c;">打开&nbsp;&nbsp;<b
						style="color: #fff;">微信’扫一扫’</b>&nbsp;&nbsp;扫描二维码</div>
			</div>
			<div id="login_phone">
				<div>
					<i class="icon-phone"></i>
					<select class="select-area">
						<option value="+086">大陆+086</option>
						<option value="+852">香港+852</option>
						<option value="+853">澳门+853</option>
						<option value="+084">越南+084</option>
						<option value="+092">巴基斯坦+092</option>
						<option value="+065">新加坡+065</option>
						<option value="+358">法国+358</option>
						<option value="+066">泰国+066</option>
					</select>
					<input id="user_phone" class="text1" name="phone" placeholder="请输入手机号"
						style="box-sizing:border-box;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:125px;border-radius:2px 2px 2px 2px;"
						maxlength="11" onkeypress="return event.keyCode>=48&amp;&amp;event.keyCode<=57"
						onkeyup="value=value.replace(/[^\d]/g,'')">
				</div>
				<p class="err-info phone-err">请输入正确的手机号</p>
				<div class="pass-word code-number">
					<i class="icon-codeNumber"></i>
					<input placeholder="请输入短信动态码" id="codeNumber" class="text1 text2"
						style="box-sizing:border-box;color:#fff;border:1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
						name="codeNumber" type="text" maxlength=6>
					<button type="button" id="code-get">获取</button>
				</div>
				<p class="err-info pass-err">请输入短信验证码</p>
				<br>
				<input id="phone_submit" type="button" style="cursor:pointer;" value="登录">
				<div id="code-write" class="code-write">
					<p><span class="err-tip"></span>
						<span class="code-close">x</span></p>
					<p><span>图文验证码</span></p>
					<div style="margin: 10px 10px 0 10px;">
						<input id="user_code" class="text1" name="code" placeholder="请输入验证码"
							style="width:100px;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
							maxlength=40>
						<img class="code-image" src=""  alt="图片">
					</div><br>
					<div style="text-align: center">
						<input id="code_submit" type="button" style="cursor:pointer;width:90%;" value="确定">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="foot" style="line-height:24px; position:relative;z-index:1000;">
		<a href="http://www.beian.miit.gov.cn" target="_blank">
			<label class="htmKey1a_a8" style="cursor:pointer;color:#9ac3d0;">
			Copyright © 2017 - 2035 XXXX科技有限公司 · XXX云 ● 粤ICP备xxxxx号-1
			</label>
		</a>
	</div>
	<div class="main-right">
		<div class="rightimageBox">
			<div id="qrcode-title">微信扫码关注</div>
			<img class="rightImage" src="static/images/qrcode.jpg">
		</div>
	</div>
	<div class="gb_box"></div>
	<script type="text/javascript" src="./static/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="./static/js/bootstrap-3.3.7.min.js"></script>
	<script type="text/javascript" src="./static/js/common-util-1.5.2.min.js"></script>
	<script type="text/javascript" src="./static/js/iam-core-1.5.2.min.js"></script>
	<script type="text/javascript" src="./static/js/iam-crypto-1.5.2.min.js"></script>
	<script type="text/javascript" src="./static/js/iam-captcha-jigsaw-1.5.2.min.js"></script>
	<script type="text/javascript" src="./static/js/login-1.5.2.js"></script>
	<script type="text/javascript" src="./static/js/tech-anima-1.1.1.js"></script>
	<script type="text/javascript">
     	//var iamBaseURI = "http://passport.wl4g.com/sso";
     	//var iamBaseURI = "http://localhost:14040/iam-server";
		// 引用IAM SDK插件，处理SNS授权操作
		(function () {
			window.IAM.Core.configure({
				deploy: {
            		//baseUri: iamBaseURI, // Using auto iamBaseUri
           			defaultTwoDomain: "iam", // IAM后端服务部署二级域名，当iamBaseUri为空时，会自动与location.hostnamee拼接一个IAM后端地址.
         			deaultContextPath: "/iam-server" // IAMServerd的context-path
         		},
         		// 初始相关配置(Event)
         		init: {
         			onPostCheck: function(res) {
         				// 因SNS授权（如:WeChat）只能刷新页面，因此授权错误消息只能从IAM服务加载
						var url = IAM.Core.getIamBaseUri() +"/login/errread";	
						$.ajax({
							url: url,
							xhrFields: { withCredentials: true }, // Send cookies when support cross-domain request.
							success: function (res) {
								//console.log(res);
								var errmsg = res.data["errorTipsInfo"];
								if (errmsg != null && errmsg.length > 0) {
									$("#err_tip").text(errmsg).show().delay(8000).hide(100);
								}
							}
						});
         			},
         			onError: function(req, status, errmsg){
 						console.error("初始化失败... "+ errmsg);
 					}
         		},
				// 定义验证码显示面板配置
				captcha: {
					use: "VerifyWithJigsawGraph", // default by 'VerifyWithGifGraph'
					panel: document.getElementById("jigsaw"), // Jigsaw验证码时必须
					img: document.getElementById("codeimg"), // 验证码显示 img对象（仅jpeg/gif时需要）
					input: document.getElementById("captcha_input"), // 验证码input对象（仅jpeg/gif时需要）
					onSuccess: function(verifiedToken) {
						console.debug("Captcha verify successful. verifiedToken is "+ verifiedToken);
					},
					onError: function(errmsg) { // 如:申请过于频繁
						console.warn(errmsg);
					}
				},
				// 登录认证配置
				account: {
					submitBtn: document.getElementById("iam_submit"), // 登录提交触发对象
					principal: document.getElementById("user_name"), // 必填，获取填写的登录用户名
					credential: document.getElementById("password"), // 获取登录账号密码，账号登录时必填
					onBeforeSubmit: function (principal, plainPasswd, captcha) { // 提交之前
						//console.log("准备提交登录....");
						return true;
					},
					onSuccess: function (principal, redirectUrl) {
						//console.log("登录成功!");
						return true; // 返回false会阻止自动调整
					},
					onError: function (errmsg) {
						console.error("登录失败. " + errmsg);
						$("#err_tip").text(errmsg).show().delay(5000).hide(100);
					}
				},
				sms: { // SMS认证配置
					submitBtn: document.getElementById("phone_submit"), // 登录提交触发对象
					sendSmsBtn: document.getElementById("code-get"), // 发送SMS验证码对象
					mobileArea: $(".select-area"), // 手机号区域select对象
					mobile: document.getElementById("user_phone"), // 手机号input对象
					smsCode: document.getElementById("codeNumber"), // SMS验证码input对象
					onBeforeSubmit: function (mobileNum, smsCode) {
						//console.log("准备提交登录....");
						return true;
					},
					onSuccess: function(resp){
						$('.err-tip').text('');
						$('.code-write').hide();
					},
					onError: function(errmsg){
						console.error(errmsg);
						$("#err_tip").text(errmsg).show().delay(8000).hide(100);
					}
				},
				// SNS授权配置
				sns: {
					// 定义必须的请求参数
					required: {
						getWhich: function () { // 执行操作类型，必须：当使用登录功能时值填"login",当使用绑定功能时值填"bind"
							return "login";
						},
						//refreshUrl: "" // SNS回调后重定向刷新的URL，可选，which=login时可空
					},
					// 定义内嵌授权页面配置
					qrcodePanel: {
						src: document.getElementById("qrcode_show"),
						width: "250",
						height: "260"
					},
					// 定义新开的TAB授权页的配置
					pagePanel: {
						"width": "800px",
						"height": "500px",
						"left": "250px",
						"top": "100px"
					},
					// 定义支持的社交网络服务商配置
					provider: {
						// "qq": { // 服务商名(需与后台对应, 可选：qq/wechat/sina/github/google/dingtalk/twitter/facebook等)
						// 	panelType: "pagePanel", // 使用新开TAB页的方式渲染授权页面
						// 	src: document.getElementById("qq") // 绑定QQ授权点击事件源
						// },
						"wechat": { // 服务商名(需与后台对应, 可选：qq/wechat/sina/github/google/dingtalk/twitter/facebook等)
							panelType: "qrcodePanel", // 使用内嵌的方式渲染扫码授权页面
							src: document.getElementById("codeGo") // 绑定Wechat授权点击事件源
						}
					},
					// 点击SNS服务商授权请求之前回调事件
					onBefore: function (provider, panelType) {
						if (provider == 'wechat') { // 只有微信等扫码登录时，才切换tab
							changeTab('login_scan_panel', 'login_scan_pass');
						}
						// 执行后续逻辑，返回false会阻止继续
						return true;
					}
				}
			}).bindForAccountAuthenticator().bindForSMSAuthenticator().bindForSNSAuthenticator().bindForCaptchaVerifier();
		})();
	</script>
	<script type="text/javascript">
		// 监听panelType为pagePanel类型的SNS授权回调
		(function () {
			window.onmessage = function (e) {
				if(e.data) {
					window.location.href = JSON.parse(e.data).refresh_url;
				}
			}
		})();
	</script>
</body>
</html>